<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>About – ASTRALION FRONTIER LIMITED</title>
  <script src="/static/js/tailwindcss.js"></script>
  <script src="/static/js/lucide.min.js"></script>
  <!-- <script src="/static/js/tailwindcss.js"></script>
  <script src="/static/js/lucide.min.js"></script> -->
  <link rel="stylesheet" type="text/css" href="/static/css/aos.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/footer.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/home.css" />
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
    }

    .hover-zoom {
      transition: transform 0.5s ease;
    }

    .hover-zoom:hover {
      transform: scale(1.05);
    }
  </style>
</head>

<body class="bg-white text-gray-800">

  <!-- Header Placeholder -->
  <%- include('partials/header') %>

    <!-- About Section -->
    <section class="py-20 bg-white">
      <div class=" mx-auto px-6" style="max-width: 1440px;">
        <h2 class="text-4xl font-bold text-center text-gray-900 mb-12" data-aos="fade-up">About Us</h2>

        <!-- Our Story -->
        <div class="md:flex gap-12 items-center mb-20" data-aos="fade-right">
          <div class="md:w-1/2 mb-6 md:mb-0">
            <img src="/static/images/nadine-e-LlenwFpj41c-unsplash.jpg" alt="Our Story"
              class="rounded-lg w-full  hover-zoom">
          </div>
          <div class="md:w-1/2">
            <h3 class="text-2xl font-semibold text-blue-800 mb-4">Our Story</h3>
            <p class="text-lg text-gray-700 leading-relaxed">
              Founded in 2025, ASTRALION FRONTIER empowers global innovators through strategic IP solutions. Our team of
              professionals is committed to delivering tailored services, from trademark searches to patent drafting,
              helping you navigate the complexities of intellectual property with confidence.
              <br><br>
              Our team of qualified attorneys and paralegals has successfully handled many international IP cases.
            </p>
          </div>
        </div>

        <!-- Core Values -->
        <div class="bg-gray-50 p-10 rounded-xl shadow-lg mb-20" data-aos="fade-up">
          <h3 class="text-2xl font-semibold text-blue-800 mb-6 text-center">Core Values</h3>
          <div class="grid md:grid-cols-3 gap-8 text-center text-gray-700 text-lg leading-relaxed">
            <div>
              <i data-lucide="target" class="w-8 h-8 mx-auto text-blue-600 mb-2"></i>
              <p><strong>Precision</strong><br>We offer IP solutions that align with your unique goals.</p>
            </div>
            <div>
              <i data-lucide="users" class="w-8 h-8 mx-auto text-blue-600 mb-2"></i>
              <p><strong>Integrity</strong><br>We uphold transparency, trust, and ethical standards.</p>
            </div>
            <div>
              <i data-lucide="globe" class="w-8 h-8 mx-auto text-blue-600 mb-2"></i>
              <p><strong>Global Mindset</strong><br>Cross-border solutions with international reach.</p>
            </div>
          </div>
        </div>

        <!-- Our Team -->
        <div data-aos="fade-up">
          <h3 class="text-2xl font-semibold text-blue-800 mb-8 text-center">Our Team</h3>
          <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-8">
            <!-- Team Member 1 -->
            <div class="text-center">
              <img src="/static/images/team1.jpg" alt="Team Member 2" style="width: 470px;"
                class=" h-60 mx-auto mb-4  hover-zoom">
              <!-- <div style="width: 470px;" class=" h-60 mx-auto mb-4  hover-zoom"
              style="background: url('./team1.jpg') center center;background-size: cover;"></div> -->

              <!-- <img src="/static/images/team1.jpg" alt="Team Member 1"
              style="width: 470px;" class=" h-60 mx-auto mb-4  hover-zoom"> -->
              <!-- <p class="text-lg font-medium">Sophia Liu</p>
            <p class="text-gray-500">IP Attorney</p> -->
            </div>
            <!-- Team Member 2 -->
            <div class="text-center">
              <img src="/static/images/team2.jpg" alt="Team Member 2" style="width: 470px;"
                class=" h-60 mx-auto mb-4  hover-zoom">
              <!-- <div style="width: 470px;" class=" h-60 mx-auto mb-4  hover-zoom"
              style="background: url('./team2.jpg') center center;background-size: cover;"></div> -->
              <!-- <p class="text-lg font-medium">Daniel Roberts</p>
            <p class="text-gray-500">Patent Specialist</p> -->
            </div>
            <!-- Team Member 3 -->
            <div class="text-center">
              <img src="/static/images/team3.jpg" alt="Team Member 1" style="width: 470px;"
                class=" h-60 mx-auto mb-4  hover-zoom">
              <!-- <div style="width: 470px;" class=" h-60 mx-auto mb-4  hover-zoom"
              style="background: url('./team3.jpg') center center;background-size: cover;"></div> -->
              <!-- <p class="text-lg font-medium">Elena Wong</p>
            <p class="text-gray-500">Trademark Analyst</p> -->
            </div>
          </div>
          <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-8">
            <!-- Team Member 1 -->
            <div class="text-center">
              <img src="/static/images/team4.jpg" alt="Team Member 1" style="width: 470px;"
                class=" h-60 mx-auto mb-4  hover-zoom">
              <!-- <div style="width: 470px;" class=" h-60 mx-auto mb-4  hover-zoom"
              style="background: url('./team4.jpg') center center;background-size: cover;"></div> -->
              <!-- <p class="text-lg font-medium">Sophia Liu</p>
            <p class="text-gray-500">IP Attorney</p> -->
            </div>
            <!-- Team Member 2 -->
            <div class="text-center">
              <img src="/static/images/team5.jpg" alt="Team Member 1" style="width: 470px;"
                class=" h-60 mx-auto mb-4  hover-zoom">
              <!-- <div style="width: 470px;" class=" h-60 mx-auto mb-4  hover-zoom"
              style="background: url('./team5.jpg') center center;background-size: cover;"></div> -->
              <!-- <p class="text-lg font-medium">Daniel Roberts</p>
            <p class="text-gray-500">Patent Specialist</p> -->
            </div>
            <!-- Team Member 3 -->
            <div class="text-center">
              <img src="/static/images/team6.jpg" alt="Team Member 1" style="width: 470px;"
                class=" h-60 mx-auto mb-4  hover-zoom">
              <!-- <div style="width: 470px;" class=" h-60 mx-auto mb-4  hover-zoom"
              style="background: url('./team6.jpg') center center;background-size: cover;"></div> -->
              <!-- <p class="text-lg font-medium">Elena Wong</p>
            <p class="text-gray-500">Trademark Analyst</p> -->
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer Section -->
    <%- include('partials/footer') %>

      <!-- Scripts -->
      <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
      <script>
        AOS.init({
          duration: 800,
          once: true
        });
        lucide.createIcons();
      </script>
</body>

</html>